<template>
<div style="background-color: #f5f5f5;padding: 10px;display: flex;justify-content: center;align-items: center;">
    <a-card title="房间创建" class="card" style="width: 400px;">
           <van-form @submit="createRoom">
                <van-cell style="margin-top: 16px;">
                  <van-field v-model="state.formData.roomname" name="房间名" label="房间名" placeholder="房间名" :rules="[{ required: true, message: '请填写房间名' }]"/>
                  </van-cell>
                  <van-cell style="margin-top: 16px;">
                  <van-field v-model="state.formData.password" name="房间密码" label="房间密码" placeholder="房间密码" :rules="[{ required: true, message: '请填写房间密码' }]"/>
                </van-cell>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">创建房间</van-button>
                <van-button round block type="primary" @click="Word" style="margin-top: 16px;">词库选择</van-button>
            </div>
            </van-form>
          </a-card>
    </div>
  </template>
    <script>
    import {  defineComponent,reactive } from 'vue';
    import { useRouter } from 'vue-router';
    //import store from '@/store';
    //import axios from 'axios';
    import socket from '@/socket';
    import {message}from 'ant-design-vue'
    export default defineComponent({
      name: 'App',
      components: {
      },
      setup(){
        const router=useRouter()
        const state = reactive({
          formData:{
            roomname: '',
            password: '',
            username: localStorage.getItem('username'),
          },
        });
        const createRoom = ()=>{
          //localStorage.removeItem('wordcontent');
          if(localStorage.getItem('wordcontent')){
          socket.emit('create_room',state.formData)
          router.push('/Draw')}
          else{
            message.info('未选择词库')
          }
        }; 
        const Word = ()=>{
          router.push('/WordSelect')
        }
        return{
          state,
          createRoom,
          router,
          Word
        }
      }
    })
    </script>